<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>M-SS商城首页</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	<link rel="stylesheet" href="css/index.css" />
  </head>
  
<body>
		<!--导航-->
		<nav class="navbar navbar-default  navbar-fixed-top">
			<div class="container">
				<nav class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="index.html" class="navbar-brand">M-SS网上商城</a>
				</nav>
				<div class="collapse navbar-collapse" id="myNavbar" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">首页</a></li>
						<li><a href="##menu1">功能1</a></li>
						<li><a href="##menu2">功能2</a></li>
						<li><a href="#">功能3</a></li>
						<li><a href="#">功能4</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-responsive-collapse navbar-right">
						<li>
							<a href="login.html"><span class="glyphicon glyphicon-user"></span> 我的账户</a>
						</li>
						<li>
							<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
						</li>
					</ul>
					<form class="navbar-form navbar-right hidden-sm">
						<div class="form-group">
							<input class="form-control" type="text" placeholder="搜索商品" />
						</div>
						 <button type="submit" class="btn btn-success">搜索</button>
					</form>
		     	</div>
			</div>
		</nav>
		<!--导航-->
		
		<!--banner-->
		<div class="container" style="margin-top: 51px;">
			<div data-ride="carousel" id="carousel_container" class="carousel slide">
				<!--图片容器 -->
				<div class="carousel-inner">
					<div class="item"><a href="#"><img class="center-block" src="img/banner-2.png" /></a></div>
					<div class="item active"><a href="#"><img class="center-block" src="img/banner-2.png" /></a></div>
					<div class="item"><a href="#"><img class="center-block" src="img/banner-2.png" /></a></div>
				</div>

				<!--小圆圈容器 -->
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel_container"></li>
					<li data-slide-to="1" data-target="#carousel_container"></li>
					<li data-slide-to="2" data-target="#carousel_container"></li>
				</ol>
				<!--左右按钮容器 -->
				<a href="#carousel_container" data-slide="prev" class="left carousel-control">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>

				<a href="#carousel_container" data-slide="next" class="right carousel-control">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div><br>
		<!--banner-->
		<!--内容-->
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="cpu.html" style="text-decoration: none;">
						CPU<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>

		</div>
		
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="zhuban.html" style="text-decoration: none;">
					主板
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="xianka.html" style="text-decoration: none;">
						显卡<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>

		</div>
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="" style="text-decoration: none;">
					内存
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="SSD.html" style="text-decoration: none;">
						SSD<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>

		</div>
		<div class="container">
			<div class="panel panel-success" id="mr2">
				<div class="panel-heading" id="#menu2">
					<a href="" style="text-decoration: none;">
					电源
					<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-4">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
		</div>
		<div class="container" id="shangping">
			<div class="panel panel-info" id="mr1">
				
				<div class="panel-heading" id="#menu1">
					<a href="jixiang.html" style="text-decoration: none;">
						机箱<!--图标-->
						<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span>
					<span class="glyphicon glyphicon-align-justify pull-right"></span>
					</a>
				</div>
				
				<div class="clearfix"></div>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>
			
			<div class="thumbnail col-sm-3">
				<a class="thumbnail" href="#"><img src="img/5R02DN32QOAM_1000x500.jpg" alt="pic">
					<div class="caption text-center">
						<h3 style="margin-top: 1px;">标题党</h3>
						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
					</div>
				</a>
			</div>

		</div>
		
		</div>
		
		<footer class="container-fluid panel-footer text-center">
			<p>网上商城 Copyright</p>
		</footer>
		<!--内容-->
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	</body>
</html>
